import React from 'react';
import { withRouter } from 'react-router-dom';
import { Tabs, message } from 'antd';
import Helmet from 'react-helmet'

import PropTypes from 'prop-types';
import { inject, observer } from 'mobx-react';
import User from '../store/user_store'

import MobileHeder from './mobile_header';
import MobileFooter from './mobile_footer';
import MyComments from './my_comments';
import MyCollection from './my_collection';
import { get } from '../util/comm'
// api url常量
import { collectionUrl, commentUrl } from '../util/constant';
// 实例化工具类

// PC用户中心
@inject((stores) => {
  const store = {
    userStore: stores.userStore,
  }
  return store
})
@observer
class PCUserCenter extends React.Component {
  constructor() {
    super();
    this.state = {
      comments: [],
      collection: [],
      commentsOption: {
        page: 1,
        pageSize: 15,
        total: 0,
      },
      collectionOption: {
        page: 1,
        pageSize: 15,
        total: 0,
      },
    }
    this.onChangePage = this.onChangePage.bind(this)
  }
  // 未登录跳转首页
  componentWillMount() {
    const { userInfo } = this.props.userStore
    try {
      if (!userInfo.id) {
        message.error('请先登录')
        this.props.history.push('/')
      }
    } catch (e) {

    }
  }
  componentDidMount() {
    this.getMyComments(this.state.commentsOption.page);
    this.getMyCollection(this.state.collectionOption.page);
  }

  // 改变页码
  onChangePage(id, index) {
    if (id === 0) {
      this.getMyComments(index);
    } else if (id === 1) {
      this.getMyCollection(index);
    }
  }
  // 请求我的品论
  getMyComments(page) {
    this.setState({
      comments: [],
    })
    const { userInfo, isLogin } = this.props.userStore
    const param = {
      userId: userInfo.id || '',
      pageSize: this.state.commentsOption.pageSize,
      page,
    }
    const url = commentUrl;
    if (isLogin) {
      get(url, param).then((res) => {
        if (res.status === 200 && res.data.code === 1) {
          const commentsOption = {
            page: param.page,
            pageSize: param.pageSize,
            total: res.total,
          }
          this.setState({
            comments: res.data.data,
            commentsOption,
          })
        } else {
          this.props.history.push('/');
        }
      })
    } else {
      this.props.history.push('/');
    }
  }
  // 请求我的收藏
  getMyCollection(page) {
    this.setState({
      collection: [],
    })
    const { userInfo, isLogin } = this.props.userStore
    const param = {
      userId: userInfo.id || '',
      pageSize: this.state.collectionOption.pageSize,
      page,
    }
    const url = collectionUrl;
    if (isLogin) {
      get(url, param).then((res) => {
        if (res.status === 200 && res.data.code === 1) {
          const collectionOption = {
            page: param.page,
            pageSize: param.pageSize,
            total: res.total,
          }
          this.setState({
            collection: res.data.data,
            collectionOption,
          })
        }
      })
    }
  }
  render() {
    const { TabPane } = Tabs;
    return (
      <div id="mobile">
        <MobileHeder />
        <Helmet>
          <title>用户中心</title>
        </Helmet>
        <div className="mobile-usercenter">
          <Tabs defaultActiveKey="1">
            <TabPane tab="我的评论" key="1">
              <MyComments
                onChangePage={() => this.onChangePage(0)}
                comments={this.state.comments}
                page={this.state.commentsOption.page}
                total={-(0 - this.state.commentsOption.total)}
                pageSize={this.state.commentsOption.pageSize}
                isLoading={this.state.commentsLoading}
              />
            </TabPane>
            <TabPane tab="我的收藏" key="2">
              <MyCollection
                onChangePage={() => this.onChangePage(1)}
                collection={this.state.collection}
                page={this.state.collectionOption.page}
                total={-(0 - this.state.collectionOption.total)}
                pageSize={this.state.collectionOption.pageSize}
              />
            </TabPane>
          </Tabs>
        </div>
        <MobileFooter />
      </div>
    )
  }
}
export default withRouter(PCUserCenter);

PCUserCenter.propTypes = {
  userStore: PropTypes.instanceOf(User),
  history: PropTypes.objectOf(Object),
}
